import React, { useEffect, useState } from 'react'
import './mood.scss'
import Title from '../../components/Title/Title'
import Pagination from '../../components/Pagination/Pagination'
import axios from '../../axios'
import moment from 'moment'
import IconFont from '../../components/IconFont/IconFont'

export default function Mood() {

  const [list, setList] = useState([])
  const [pageIndex,setPageIndex] = useState(1)
  const [pageSize] = useState(20)
  const [total, setTotal] = useState(0)

  useEffect(() => {
    axios.get('/mood', {
      pageIndex,
      pageSize
    }).then(res => {
      setList(res.data.records)
      setTotal(res.data.total)
      window.scrollTo(0,0)
    })
  }, [pageIndex, pageSize])

  const changePageIndex = (index) => {
    setPageIndex(index)
  }

  return (
    <div className='mood'>
      <Title>收藏语录</Title>
      <div className='list'>
        {
          list.map((item) => {
            return (
              <div className='list-item' key={item._id}>
                <div className='date'>
                  <IconFont type='icon-rili' style={{fontSize: '15px', marginRight: '4px'}}></IconFont>
                  <span>{moment(item.publishDate).format('YYYY-MM-DD')}</span>
                </div>
                <div className='main'>
                  <div className='content'>
                    {item.content}
                  </div>
                  <div className='quote'>
                    {
                      (item.author || item.quote) && <span className='line'>———</span>
                    }
                    <span>{item.author}</span>
                    <span>{item.quote}</span>
                  </div>
                </div>   
              </div>
            )
          })
        }
      </div>
      <Pagination current={pageIndex} pageSize={pageSize} total={total} change={changePageIndex}></Pagination>
    </div>
  )
}
